<template>
  <el-dialog
    :title="title"
    :visible.sync="isOpen"
    append-to-body
    @close="handleClose"
    width="85%"
  >
    <el-descriptions>
      <el-descriptions-item label="指标名称">
        <b>{{ workDetail.normName || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="指标分值">
        <b>{{ workDetail.planScore || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="责任单位">
        <b> {{ workDetail.deptName || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="纳入进度管理">
        <b>{{
          workDetail.demandCompletionDate
            ? workDetail.demandCompletionDate + " 前完成"
            : "-"
        }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="指标内容" span="3">
        <b>{{ workDetail.workContent || "-" }}</b>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 上传提示 -->
    <div class="el-upload__tip">
      <p>
        <b style="color: #f56c6c">*完成材料：</b>大小不超过
        <b style="color: #f56c6c">{{ fileSize }}MB</b> 格式为
        <b style="color: #f56c6c">{{ fileType.join("/") }}</b
        >的文件（不超过<b style="color: #f56c6c">{{ limit }}</b
        >项）
      </p>
    </div>

    <el-table
      :data="list"
      v-loading="loading"
      border
      style="width: 100%"
      :span-method="arraySpanMethod"
    >
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分办所" prop="deptName" align="center">
      </el-table-column>
      <el-table-column
        label="完成情况"
        prop="completionSituation"
        min-width="130"
        align="center"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.completionSituation"
            type="textarea"
            placeholder="输入工作完成情况"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 5 }"
            v-show="!checkWorkPlanDisabled()"
          ></el-input>
          <span v-show="checkWorkPlanDisabled()">{{
            scope.row.completionSituation
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="`得分（分值${workDetail.planScore}分）`"
        prop="firstScore"
        align="center"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model.trim="scope.row.firstScore"
            placeholder="初评得分"
            controls-position="right"
            :min="0"
            v-show="!checkWorkPlanDisabled()"
          ></el-input-number>
          <span v-show="checkWorkPlanDisabled()">{{
            scope.row.firstScore || "-"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        prop="remarks"
        min-width="130"
        align="center"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.remarks"
            placeholder="输入备注"
            type="textarea"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 5 }"
            v-show="!checkWorkPlanDisabled()"
          ></el-input>
          <span v-show="checkWorkPlanDisabled()">{{
            scope.row.remarks || "-"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="完成材料"
        prop="completionMaterialUrls"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <FileUpload
            v-show="!checkWorkPlanDisabled()"
            v-model="scope.row.completionMaterialUrls"
            :isShowTip="false"
            :fileType="fileType"
          ></FileUpload>
          <div v-show="checkWorkPlanDisabled()">
            <div v-if="scope.row.completionMaterialUrls">
              <el-tooltip
                v-for="(url, index) in scope.row.completionMaterialUrls.split(
                  ','
                )"
                :key="index"
                effect="dark"
                :content="formatFileUrl(url)['name']"
                placement="top-start"
              >
                <el-button
                  type="text"
                  @click="handlePreviewFile(url)"
                  size="mini"
                  class="file-preview-btn"
                >
                  {{ formatFileUrl(url)["name"] }}
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click.stop="handleWorkPlanSaveOrSubmit('save')"
        v-hasPermi="['work:work-completion:save']"
        v-show="operation === 'edit'"
      >
        保存
      </el-button>

      <el-button
        type="warning"
        @click.stop="handleWorkPlanSaveOrSubmit('submit')"
        v-hasPermi="['work:work-completion:submit']"
        v-show="operation === 'edit'"
      >
        提交
      </el-button>
      <el-button
        v-show="operation === 'view'"
        type="primary"
        @click="handleClose"
        >关 闭</el-button
      >
    </div>
    <FilePreview
      :visible.sync="filePreviewVisible"
      :file="previewFile"
    ></FilePreview>
  </el-dialog>
</template>

<script>
import {
  centerWorkCompletion,
  centerWorkSaveOrSubmit,
} from "@/api/work/work-completion";
import FilePreview from "@/components/FilePreview";
import FileUpload from "@/components/FileUpload";
import { mixins } from "@/mixins";
export default {
  name: "work-completion-center_work",
  mixins: [mixins],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    work: {
      type: Object,
      default: () => {},
    },
    operation: {
      type: String,
      default: "view",
    },
  },
  components: {
    FilePreview,
    FileUpload,
  },
  data() {
    return {
      workDetail: {},
      filePreviewVisible: false,
      previewFile: {},
      centerWorkItem: {
        completionSituation: undefined,
        firstScore: undefined,
        completionMaterialUrls: "",
      },
      centerWorkMapping: {
        completionSituation: "完成情况",
        firstScore: "得分",
      },
      isOpen: false,
      title: "中心工作纪实",
      list: [],
      total: 0,
      loading: false,
    };
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        this.isOpen = val;
        if (val) {
          this.getList();
        }
      },
    },
  },
  methods: {
    handleWorkPlanSaveOrSubmit(operation) {
      let workReportMark = false;
      if (operation === "submit") workReportMark = true;
      let params = [];
      let urls = "";
      for (let item of this.list) {
        if (item.completionMaterialUrls) urls = item.completionMaterialUrls;
        let paramsItem = { id: item.id, workReportMark, remarks: item.remarks };
        for (let key of Object.keys(this.centerWorkMapping)) {
          paramsItem[key] = item[key];
          paramsItem["completionMaterialUrls"] = urls;
          if (item[key] === "" || item[key] === null) {
            this.$message.error(
              `操作失败，有未填写的【${this.centerWorkMapping[key]}】的数据，请检查！`
            );
            return;
          }
        }
        params.push(paramsItem);
      }

      centerWorkSaveOrSubmit(params).then((res) => {
        if (operation === "submit") {
          this.$modal.msgSuccess("已提交");
          this.$emit("success");
          this.handleClose();
        } else if (operation === "save") {
          this.$modal.msgSuccess("已保存");
          this.$emit("success");
        }
      });
    },
    // 表格合并列
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 5) {
        return {
          rowspan: this.list.length,
          colspan: 5,
        };
      }
    },
    // 校验工作计划表单字段是否可填
    checkWorkPlanDisabled() {
      return this.operation === "view";
    },
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url);
      this.previewFile = { url, ...fileItem };
      this.filePreviewVisible = true;
    },
    getList() {
      this.loading = true;
      centerWorkCompletion({ id: this.work.id })
        .then((res) => {
          let {
            data: { deptCenterWorkScoreDetailsList, workPlanDetails },
          } = res;
          this.loading = false;
          this.workDetail = workPlanDetails;
          this.list = deptCenterWorkScoreDetailsList.map((item) => {
            if (item.firstScore == "" || item.firstScore == null) {
              item.firstScore = this.work.planScore;
            }
            if (
              item.completionSituation === "" ||
              item.completionSituation === null
            ) {
              item.completionSituation = "完成";
            }
            return item;
          });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 关闭弹框
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss"></style>
